<template>
  <div>
    <div class="distribution-container">
      <div class="distribution-item" :class="{'active': activeTab === 'age'}" @click="setActiveTab('age')">
        年龄分布
      </div>
      <div class="distribution-item" :class="{'active': activeTab === 'party'}" @click="setActiveTab('party')">
        党龄分布
      </div>
      <div class="distribution-item" :class="{'active': activeTab === 'education'}" @click="setActiveTab('education')">
        学历分布
      </div>
      <div class="distribution-item" :class="{'active': activeTab === 'ethnicity'}" @click="setActiveTab('ethnicity')">
        民族分布
      </div>
    </div>
    <div>
      <BarChart v-if="!change" :data="childData"/>
    </div>
  </div>


</template>

<script setup lang="ts">
import {type Ref, ref, type UnwrapRef} from 'vue';
import BarChart from "@/views/components/left/left-bottom/BarChart.vue";

const change =ref<boolean>(false)

const activeTab = ref<'age' | 'party' | 'education' | 'ethnicity'>('age'); // 使用 TypeScript 定义 activeTab 的类型
// 定义数据类型
type ChildrenData = [string, number];
// 定义数据
let childData = ref<ChildrenData[]>([
  ['30岁以下', 47],
  ['30-40岁', 98],
  ['41-50岁', 125],
  ['51-60岁', 34],
  ['60岁以上', 69]
]);
const setActiveTab = (tab: 'age' | 'party' | 'education' | 'ethnicity') => {
  activeTab.value = tab; // 设置激活的Tab
  switch (activeTab.value) {
    case 'age':
      childData=ref<ChildrenData[]>([
        ['30岁以下',47],
        ['30-40岁',98],
        ['41-50岁',125],
        ['51-60岁',34],
        ['60岁以上',69]
      ])
      break;
    case 'party':
      childData=ref<ChildrenData[]>([
        ['10年以内',69],
        ['10-19岁',34],
        ['20-29岁',233],
        ['30年以上',69]
      ])
      break;
    case 'education':
      childData=ref<ChildrenData[]>([
        ['本科及以上',34],
        ['本科',98],
        ['高中',125],
        ['初中',116]
      ])
      break;
    case 'ethnicity':
      childData=ref<ChildrenData[]>([
        ['男',173],
        ['女',200]
      ])
      break;
    default:
      childData=ref<ChildrenData[]>([
        ['汉族',200],
        ['壮族',100],
        ['苗族',10],
        ['傣族',32],
        ['白族',16],
        ['回族',22],
        ['维吾尔族',17]
      ])
      break;
  }
  change.value=true
  setTimeout(()=>{
    change.value=false
  },500)
};
</script>

<style scoped>
.distribution-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.distribution-item {
  color: rgb(255, 240, 177);
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, background-image 0.3s ease;
  background-size: cover;
  background-position: center;
}

.distribution-item.active {
  color: white; /* 激活时文本颜色 */
  background-image: url('@/assets/preview (18).png'); /* 激活时的背景图片 */
  border-radius: 5px;
}


</style>
